<template>
  <div class="episode-container">
    <div class="index">
      <span class="index-no">No.</span>
      <span class="index-num">{{index}}</span>
      <div class="index-line"></div>
    </div>
    <div class="date">
      <span class="date-month">{{this.month}}</span>
      <span class="date-year">{{this.year}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Episode',
  data () {
    return {
      month: '',
      year: 0,
      months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    }
  },
  props: {
    index: Number
  },
  mounted () {
    const date = new Date()
    this.month = this.months[date.getMonth()]
    this.year = date.getFullYear()
  }
}
</script>

<style lang="stylus" scoped>
  .episode-container
    display: inline-flex
    flex-direction: row
    height: .6rem
    .index
      display: flex
      flex-direction: row
      align-items: baseline
      .index-no
        font-size: .32rem
      .index-num
        font-size: .6rem
        line-height: .6rem
        font-weight: 600
        margin-right: .14rem
      .index-line
        height: .44rem;
        margin-right: .14rem;
        border-left: 1px solid black;
    .date
      display: flex
      flex-direction: column
      height: .6rem
      margin-top: .05rem
      .date-month
        font-size: .24rem
        line-height: .24rem
      .date-year
        font-size: .2rem
</style>
